<template>
  <div>
    <h1>姓名: {{ name }}</h1>
    <h1>年龄: {{ age }}</h1>
    <h1>薪资: {{ salary }}k</h1>
    <h1 v-if="person.car">汽车:{{ person.car }}</h1>

    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">修改年龄</button>
    <button @click="salary++">涨薪</button>

    <button @click="addCar">添加汽车</button>
    <div v-show="person.car">
        <button @click="person.car.name+='!'">修改汽车名称</button>
        <button @click="person.car.price++">修改汽车价格</button>
    </div>
   




  </div>
</template>
  <script>
import { reactive, toRef,toRefs,shallowReactive,shallowRef,readonly,shallowReadonly, toRaw, markRaw } from "vue";

export default {
  name: "Demo",
  setup() {
    // let person = shallowReactive({
    let person = reactive({

      name: "JJ",
      age: 18,
      job: {
        job1: {
          salary: 20
        }
      }
    });
 

    //深只读
    // person=readonly(person)

    //浅只读
    // person=shallowReadonly(person)

    // let tr =toRaw(person);
    // console.log(tr)
    function addCar(){
        //标记之后 不能有响应式
        person.car =markRaw({
            name: "宝马",
            price:100
        })
    }


    return {
      person,
      name:toRef(person,'name'),
      age:toRef(person,'age'),
      salary:toRef(person.job.job1,'salary'),
    //   ...toRefs(person)
      addCar
    }
  }
};
</script>
    
    <style>
</style>
    
   